<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Toolbars</h1>
                        <small>Toolbars are used as action headers to perform certain list of actions within a page with list of data.</small>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <br/>

                    <header class="content__title">
                        <h1>Basic example</h1>
                        <small>Basic example with label only</small>
                    </header>

                    <div class="toolbar">
                        <div class="toolbar__label">This is a sample label</div>
                    </div>


                    <header class="content__title">
                        <h1>Nav</h1>
                        <small>Add set of nav links</small>
                    </header>

                    <div class="toolbar">
                        <div class="toolbar__nav">
                            <a href="">Profile</a>
                            <a href="">Messages</a>
                            <a href="">Settings</a>
                        </div>
                    </div>

                    <header class="content__title">
                        <h1>Search</h1>
                        <small>Add togglable search blocks with input and close options</small>
                    </header>

                    <div class="toolbar">
                        <div class="actions">
                            <i class="actions__item zmdi zmdi-search" data-ma-action="toolbar-search-open"></i>
                        </div>

                        <div class="toolbar__search">
                            <input type="text" placeholder="Search..."/>
                            <i class="toolbar__search__close zmdi zmdi-long-arrow-left" data-ma-action="toolbar-search-close"></i>
                        </div>
                    </div>

                    <header class="content__title">
                        <h1>Action Icons</h1>
                        <small>Add further action icons in addition to search</small>
                    </header>

                    <div class="toolbar">
                        <div class="actions">
                            <i class="actions__item zmdi zmdi-search" data-ma-action="toolbar-search-open"></i>
                            <a href="" class="actions__item zmdi zmdi-time"></a>
                            <div class="dropdown actions__item">
                                <i class="zmdi zmdi-sort" data-toggle="dropdown"></i>

                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Last Modified</a>
                                    <a href="" class="dropdown-item">Name</a>
                                    <a href="" class="dropdown-item">Size</a>
                                </div>
                            </div>
                            <a href="" class="actions__item zmdi zmdi-help-outline"></a>
                        </div>

                        <div class="toolbar__search">
                            <input type="text" placeholder="Search..."/>
                            <i class="toolbar__search__close zmdi zmdi-long-arrow-left" data-ma-action="toolbar-search-close"></i>
                        </div>
                    </div>

                    <header class="content__title">
                        <h1>Complete example</h1>
                        <small>Complete toolbar example with navs and action icons</small>
                    </header>

                    <div class="toolbar">
                        <div class="toolbar__nav">
                            <a href="">Profile</a>
                            <a href="">Messages</a>
                            <a href="">Settings</a>
                        </div>

                        <div class="actions">
                            <i class="actions__item zmdi zmdi-search" data-ma-action="toolbar-search-open"></i>
                            <a href="" class="actions__item zmdi zmdi-time hidden-xs-down"></a>
                            <div class="dropdown actions__item hidden-xs-down">
                                <i class="zmdi zmdi-sort" data-toggle="dropdown"></i>

                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Last Modified</a>
                                    <a href="" class="dropdown-item">Name</a>
                                    <a href="" class="dropdown-item">Size</a>
                                </div>
                            </div>
                            <a href="" class="actions__item zmdi zmdi-help-outline hidden-xs-down"></a>
                        </div>

                        <div class="toolbar__search">
                            <input type="text" placeholder="Search..."/>
                            <i class="toolbar__search__close zmdi zmdi-long-arrow-left" data-ma-action="toolbar-search-close"></i>
                        </div>
                    </div>
                </div>

                
            </div></template>